<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-template-container`]">
      <view class="room-bg-wrap" :style="{ backgroundImage: `url(${formData.room_cover})` }">
        <view class="room-info card">
          <view class="project-name">{{ formData.project_name }}</view>
          <view class="building-detail">
            <view>{{ formData.room_name }}·{{ formData.room_type }}</view>
            <view>{{ formData.room_towards + formData.monthly_rent }}元/月</view>
          </view>
          <view class="room-detail">{{ formData.room_type_title }}</view>
        </view>
      </view>
      <view class="card">
        <view class="bill-title">合同编码</view>
        <view class="bill-value">
          <span>{{ formData.contract_code }}</span>
          <span class="copy" @click="copyData(formData.contract_code)">复制</span>
        </view>
        <view class="bill-title">出租单位名称</view>
        <view class="bill-value">
          <span>{{ formData.project_company_name }}</span>
          <span class="copy" @click="copyData(formData.project_company_name)">复制</span>
        </view>
        <view class="bill-title">统一社会信用代码</view>
        <view class="bill-value">
          <span>{{ formData.company_code }}</span>
          <span class="copy" @click="copyData(formData.company_code)">复制</span>
        </view>
        <view class="bill-title">地址</view>
        <view class="bill-value">
          <span>{{ formData.project_address }}</span>
          <span class="copy" @click="copyData(formData.project_address)">复制</span>
        </view>
      </view>
      <!-- <view class="card">
      <view class="title">租房进度</view>
      <view class="bill-progress"> </view>
    </view> -->
      <view class="card">
        <view class="title">租房记录</view>
        <view v-for="(item, index) in formData.step_list" :key="index" class="bill-value">
          <span>{{ item.name }}</span>
          <span class="value">{{ item.date }}</span>
        </view>
      </view>
      <view class="fixed-wrap">
        <view class="fixed-button">
          <uv-button type="primary" text="查看合同" customStyle="margin-top: 10px" @click="submit"></uv-button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { contractInfo } from './api'
export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        safeAreaInsets: 0,
        room_cover: '',
        project_name: '',
        room_name: '',
        room_type: '',
        monthly_rent: '',
        room_type_title: '',
        room_type_name: '',
        room_towards: '',
        area: '',
        contract_code: '',
        project_company_name: '',
        company_code: '',
        project_address: '',
        step_list: [],
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.formData.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await contractInfo({ id })
      for (let key in this.formData) {
        if (key != 'safeAreaInsets') {
          this.formData[key] = data[key]
        }
      }
    },
    copyData(value) {
      this.$Helper.copyText(value)
    },
    submit() {
      const { id } = this.$Route.query
      this.$ROUTE.go('/pages/subpackage/contract/contract-html', { id, type: 'contract' })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('template-container')} {
  position: relative;
  background: #f5f5f5;
  padding-bottom: 100px;
  .room-bg-wrap {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    box-sizing: border-box;
    height: 300px;
    position: relative;
    margin-bottom: 15%;
    .room-info {
      box-sizing: border-box;
      width: calc(100% - 20px);
      position: absolute;
      bottom: 0;
      transform: translate(0, 50%);
      .building-detail {
        margin: 5px 0;
        @include flex-bar;
      }
    }
  }
  .card {
    margin: 15px 10px;
    background: white;
    padding: 15px 10px;
    border-radius: 8px;
    .title {
      position: relative;
      padding-left: 10px;
      margin-top: 0;
      margin-bottom: 10px;
      &::before {
        width: 3px;
        height: 100%;
        position: absolute;
        background: $uv-primary;
        left: 0;
        content: ' ';
      }
    }
    .bill-title {
      font-weight: 600;
      margin-bottom: 8px;
    }
    .bill-value {
      display: flex;
      padding: 0 0 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #f5f5f5;
      &:last-child {
        border: 0;
      }
      .copy {
        margin-left: auto;
        color: $uv-primary;
      }
      .value {
        margin-left: auto;
        color: #999999;
      }
    }
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
}
</style>
